<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工列表</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 员工添加的模态框 -->
    <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">员工添加</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">职员姓名</label>
                            <div class="col-sm-10">
                                <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">email</label>
                            <div class="col-sm-10">
                                <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@zhenqiang.com">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">gender</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">deptName</label>
                            <div class="col-sm-4">
                                <!-- 部门提交部门id即可 -->
                                <select class="form-control" name="dId">
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 员工修改的模态框 -->
    <div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >员工修改</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">职员姓名</label>
                            <div class="col-sm-10">
                                <p class="form-control-static" id="empName_update_static"></p>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">email</label>
                            <div class="col-sm-10">
                                <input type="text" name="email" class="form-control" id="email_update_input" placeholder="email@zhenqiang.com">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">gender</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">deptName</label>
                            <div class="col-sm-4">
                                <!-- 部门提交部门id即可 -->
                                <select class="form-control" name="dId">
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="emp_update_btn">修改</button>
                </div>
            </div>
        </div>
    </div>

    <%--界面搭建--%>
     <div class="container">
    <%--标题--%>
         <div class="row">
             <div class="col-md-12">
                 <h1>SMM-CRUD</h1>
             </div>
         </div>
     </div>

    <%--按钮--%>
    <div class="row">
        <%--搜索框--%>
        <div class="col-lg-3 col-md-4 col-md-offset-1">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for..." id="search_input">
                <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="search_btn">Go!</button>
      </span>
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
        <div class="col-md-4 col-md-offset-9">
            <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
        </div>
    </div>
    <!-- 显示表格数据 -->
    <div class="row">
        <div class="col-md-11 col-md-offset-1">
            <table class="table table-hover" id="emps_table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="check_all"/>
                        </th>
                        <th>#</th>
                        <th>epmName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
             </table>
        </div>
    </div>
    <!-- 显示分页信息 -->
    <div class="row">
<%--        分页信息--%>
        <div class="col-md-4 col-md-offset-1" style="font-weight: bold" id="page_info_area">    </div>
<%--        分页条信息--%>
        <div class="col-md-4 col-md-offset-8" id="page_nav_area">   </div>
    </div>
    <script type="text/javascript">
        var totalRecord,currentPage;
        //1、页面加载完成以后，直接去发送ajax请求,要到分页数据
        $(function () {
            //去首页
            to_page(1);
        });

        function to_page(pn) {
            $.ajax({
                url:"${pageContext.request.contextPath}/emps",
                data:"pn="+pn,
                type:"GET",
                success:function (result) {
                    console.log(result);
                    //1.解析并显示员工数据
                    build_emps_table(result);
                    //2、解析并显示分页信息
                    build_page_info(result);
                    //3.解析显示分页条信息
                    build_page_nav(result);
                }
        });
        }
        //1.解析并显示员工数据
        function build_emps_table(result){
            //清空table表格
            $("#emps_table tbody").empty();
            var emps = result.extend.pageInfo.list;
            //两个参数，索引和当前对象,添加员工属性
            $.each(emps,function (index,item) {
                var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                var empIdTd = $("<td></td>").append(item.empId);
                var empNameTd = $("<td></td>").append(item.empName);
                //item.gender=='M'?"男":"女"
                var gengerTd = $("<td></td>").append(item.gender);
                var emailTd = $("<td></td>").append(item.email);
                var deptNameTd = $("<td></td>").append(item.dept.deptName);
                //添加button
                var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                //为编辑按钮添加一个自定义的属性，来表示当前员工id
                editBtn.attr("edit-id",item.empId);
                var deleBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
                //为删除按钮添加一个自定义的属性，来表示当前员工id
                deleBtn.attr("dele-id",item.empId);
                var Btn = $("<td></td>").append(editBtn).append(" ").append(deleBtn);
                //append方法执行完成以后还是返回原来的元素
                $("<tr></tr>").append(checkBoxTd).append(empIdTd).append(empNameTd).append(gengerTd).append(emailTd).append(deptNameTd).append(Btn).appendTo("#emps_table tbody");
            });
        }
        //2、解析并显示分页信息
        function build_page_info(result) {
                $("#page_info_area").empty();
                $("#page_info_area").append("当前").append(result.extend.pageInfo.pageNum).append("页,总").append(result.extend.pageInfo.pages).append("页,总").append(result.extend.pageInfo.total).append("页");
                totalRecord = result.extend.pageInfo.total;
                currentPage = result.extend.pageInfo.pageNum;
        }
        //3.解析显示分页条信息
        function build_page_nav(result) {
            //page_nav_area
            $("#page_nav_area").empty();
            var ul = $("<ul></ul>").addClass("pagination");
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));

            if(result.extend.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else {
                firstPageLi.click(function () {
                        to_page(1);
                });
                prePageLi.click(function() {
                    to_page(result.extend.pageInfo.pageNum-1);
                });
            }
            ul.append(firstPageLi).append(prePageLi);
            $.each(result.extend.pageInfo.navigatepageNums,function (index,item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                ul.append(numLi);
                if(result.extend.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                numLi.click(function(){
                    to_page(item);
                });
            });
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
            if(result.extend.pageInfo.hasNextPage == false){
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            }else {
                lastPageLi.click(function () {
                    to_page(result.extend.pageInfo.pages);
                });
                nextPageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum+1);
                });
            }
            ul.append(nextPageLi).append(lastPageLi);
            var navEle = $("<nav></nav>").append(ul);
            navEle.appendTo("#page_nav_area");
        }
        //清空表单样式及内容
        function reset_form(ele){
            $(ele)[0].reset();
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }
        //点击新增按钮弹出模态框。
        $("#emp_add_modal_btn").click(function(){
            //清除表单数据（表单完整重置（表单的数据，表单的样式））
            reset_form("#empAddModal form");
            //s$("")[0].reset();
            //发送ajax请求，查出部门信息，显示在下拉列表中
            getDepts("#empAddModal select");
            //弹出模态框
            $("#empAddModal").modal({
                backdrop:"static"
            });
        });
        //查出所有的部门信息并显示在下拉列表中
        //与#empAddModal select选择器等价ele
        function getDepts(ele) {
            $(ele).empty();
            $.ajax({
                url: "${pageContext.request.contextPath}/depts",
                type: "GET",    //get为默认的可以不行
                //显示部门信息在下拉列表中
                success:function (result) {
                    $.each(result.extend.depts,function () {
                        var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                        optionEle.appendTo(ele);
                    });
                }
            });
        }

        //校验表单数据
        function validate_add_form(){
            //1.拿到要校验的数据
            var empName = $("#empName_add_input").val();
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            if (!regName.test(empName)){
                show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
                return false;
            }else {
                show_validate_msg("#empName_add_input", "success","");
            }

            //2、校验邮箱信息
            var email = $("#email_add_input").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                //alert("邮箱格式不正确");
                //应该清空这个元素之前的样式
                show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
                /* $("#email_add_input").parent().addClass("has-error");
                $("#email_add_input").next("span").text("邮箱格式不正确"); */
                return false;
            }else {
                show_validate_msg("#email_add_input", "success", "");
            }
                return true;
        }

        function show_validate_msg(ele,status,msg){
            //清除当前元素的校验状态
            $(ele).parent().removeClass("has-success has-error");
            $(ele).next("span").text("");
            if("success"==status){
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            }else if("error" == status){
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        }

        //校验用户名是否可用
        $("#empName_add_input").change(function(){
            //发送ajax请求校验用户名是否可用
            var empName = this.value;
            $.ajax({
                url:"${pageContext.request.contextPath}/checkuser",
                data:"empName="+empName,
                type:"POST",
                success:function(result){
                    if(result.code==200){
                        show_validate_msg("#empName_add_input","success","用户名可用");
                        $("#emp_save_btn").attr("ajax-va","success");
                    }else{
                        show_validate_msg("#empName_add_input","error",result.extend.va_msg);
                        $("#emp_save_btn").attr("ajax-va","error");
                    }
                }
            });
        });

        $("#emp_save_btn").click(function () {
            //1、模态框中填写的表单数据提交给服务器进行保存
            //1、先对要提交给服务器的数据进行校验,校验表单数据
            if(!validate_add_form()){
                return false;
            };
            //1、判断之前的ajax用户名校验是否成功。如果成功。
            if($(this).attr("ajax-va")=="error"){
                return false;
            }
            $.ajax({
                url:"${pageContext.request.contextPath}/emp",
                type:"POST",//jQuery函数,serialize()表格数列化后的数据,empAddModal是模态框id，里面只有一个form,所有不用命名
                data:$("#empAddModal form").serialize(),
                success:function (result) {
                    //员工保存成功；
                    if(result.code==200){
                    //1、关闭模态框
                    $("#empAddModal").modal('hide');
                    //2、来到最后一页，显示刚才保存的数据
                    //发送ajax请求显示最后一页数据即可
                    to_page(totalRecord+1);
                    }else {
                        //显示失败信息
                        //console.log(result);
                        //有哪个字段的错误信息就显示哪个字段的；
                        if(undefined != result.extend.errorFields.email){
                            //显示邮箱错误信息
                            show_validate_msg("#email_add_input", "error", result.extend.errorFields.email);
                        }
                        if(undefined != result.extend.errorFields.empName){
                            //显示员工名字的错误信息
                            show_validate_msg("#empName_add_input", "error", result.extend.errorFields.empName);
                        }
                    }
                }
            });
            });

        //1、我们是按钮创建之前就绑定了click，所以绑定不上。就是新增的编辑删除按钮是<script>中创建的，不是div内创建的
        //1）、可以在创建按钮的时候绑定，高耦合不建议。    2）、绑定点击.live()
        //jquery新版没有live，使用on进行替代
        $(document).on("click",".edit_btn",function () {
            //1、查出部门信息，并显示部门列表
            getDepts("#empUpdateModal select");
            //2、查出员工信息，显示员工信息
            getEmp($(this).attr("edit-id"));
            //3.把员工的id传给模态框
            $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
            $("#empUpdateModal").modal({
                backdrop: "static"
            });

        });
            function getEmp(id) {
                $.ajax({
                    url:"${pageContext.request.contextPath}/emp/"+id,
                    type:"GET",
                    success:function (result) {
                        var empData = result.extend.emp;
                        $("#empName_update_static").text(empData.empName);
                        $("#email_update_input").val(empData.email);
                        $("#empUpdateModal input[name=gender]").val(empData.gender);
                        $("#empUpdateModal select").val(empData.dId);
                    }
                });
            }
        //添加一个事件，绑定修改按钮,修改员工信息
        $("#emp_update_btn").click(function () {
            //验证邮箱是否合法
            //1、校验邮箱信息
            var email = $("#email_update_input").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                show_validate_msg("#email_update_input", "error", "邮箱格式不正确");
                return false;
            }else{
                show_validate_msg("#email_update_input", "success", "");
            }

            //发送ajax请求，保存员工更新数据
            $.ajax({
               url:"${pageContext.request.contextPath}/emp/"+$(this).attr("edit-id"),
                type:"PUT",
                //后端发起的是PUT请求，serialize()没有method请求，所以在序列号后面+"&_method=PUT"，改为PUT请求
                data:$("#empUpdateModal form").serialize(),
                success:function (result) {
                   //关闭弹窗
                    $("#empUpdateModal").modal("hide");
                    //跳回本页面
                    to_page(currentPage);
                }
            });
        });

            //单个删除
        $(document).on("click",".delete_btn",function () {
            //1、弹出是否删除对话框
            // $(this)当前点击的按钮,.parents()他的所有祖先节点,find("td:eq(1)")找到他里面第二个td
            var empName = $(this).parents("tr").find("td:eq(2)").text();
            var empId = $(this).attr("dele-id");
            if(confirm("确认删除【"+empName+"】吗？")){
                //确认，发送ajax请求
                $.ajax({
                    url:"${pageContext.request.contextPath}/emp/"+empId,
                    type:"DELETE",
                    success:function () {
                        alert("删除成功！");
                        //回到本页
                        to_page(currentPage);
                    }
                });
            }
        });

        //全选，全不选功能
        $("#check_all").click(function () {
            //attr获取checked是undefined
            //我们这些dom原生的属性；attr获取自定义属性的值；
            //prop修改和读取dom原生属性的值
            //checked里的值都等于全选框的$(this).prop("checked")状态
            $(".check_item").prop("checked",$(this).prop("checked"));
        });

        //check_item
        $(document).on("click",".check_item",function () {

            //$(".check_item:checked").length==$(".check_item").lenth; 选中的个数等于所有复选框的个数
            $("#check_all").prop("checked",$(".check_item:checked").length == $(".check_item").length );
        });

        //点击全部删除，就批量删除
        $("#emp_delete_all_btn").click(function () {
            var empNames = "";
            var del_Ids = "";
           $.each($(".check_item:checked"),function () {
               empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
               del_Ids += $(this).parents("tr").find("td:eq(1)").text()+"-";
           });
                //去除empNames多余的,
               empNames = empNames.substring(0, empNames.length-1);
                del_Ids = del_Ids.substring(0, empNames.length-1);
               if (confirm("确认删除【"+empNames+"吗？")){
                   //发送ajax请求
                    $.ajax({
                       url:"${pageContext.request.contextPath}/emp/"+del_Ids,
                        type:"DELETE",
                        success:function () {
                           alert("删除成功！");
                           //回到当前页
                            to_page(currentPage);
                        }
                    });
               }
        });

        //点击搜索按钮，模糊查询
        $("#search_btn").click(function () {
            var empName = "";
            var result;
            empName = $("#search_input").val();
               /* $(this).attr("search_btn");*/
            $.ajax({
                url:"${pageContext.request.contextPath}/emp/search/"+empName,
                data:result,
                type:"GET",
                success:function (result) {
                    console.log(result);
                    //1.解析并显示员工数据
                    build_emps_table(result);
                    //2、解析并显示分页信息
                    build_page_info(result);
                    //3.解析显示分页条信息
                    build_page_nav(result);
                }
            })
        });
    </script>
</body>
</html>
